<template>
    <div class="author-column">
        <article>
            <p>游戏设计：新元</p>
            <p>代码编写：新元</p>
            <p>素材收集：新元</p>
            <p>期待</p>
            <p>你们的反馈!</p>
        </article>
        <footer>
            <a href=" #" @click="openExternalURL('https://space.bilibili.com/1364143458')"><i
                    class="fab fa-bilibili"></i>BiliBili</a>
            <a href="#" @click="openExternalURL('https://github.com/xinyuan-noname')"><i
                    class="fab fa-github"></i>Github</a>
        </footer>
    </div>
</template>

<script lang="ts" setup>
import { openExternalURL } from '@/utils/electron';
</script>

<style scoped>
.author-column {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    width: 100%;
    height: 100%;
}

article {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 100%;
}

article p {
    font-size: min(4vw, 32px);
    margin: 1vh 0;
}

footer {
    flex-wrap: wrap;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}

footer a {
    margin: 0 2vw;
    flex-wrap: wrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: min(3vw, 24px);
    transition: 0.1s;
}

footer a:hover {
    transform: scale(1.2) translateY(-20%);
}
</style>